<template>
  <div>
    <filter-form
      style="text-align: center"
      planType="week"
      :showDatePicker="true"
      :showSearchKeyword="false"
      :showGroup="false"
      :currentDay="currentDay"
      :onSubmit="handleSearch"
      :onClear="handleClear"
      :onExport="handleExport"
      ref="filterRef"
    />
    <el-table v-loading="listLoading"  :data="tableData" style="margin: 30px auto;width: 95%;padding:30px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);" >
      <el-table-column type="index"  label="id" width="80">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="department" label="部门" width="100"> </el-table-column>
      <el-table-column prop="note" label="类型" width="80"
        :filters="[{ text: '在岗', value: '在岗' }, { text: '会议', value: '会议' },{ text: '出差', value: '出差' }, { text: '城内公务', value: '城内公务' }]"
        :filter-method="filterTag"
     >
          <template slot-scope="scope">
              <el-tag
                :type="getTagColor(scope.row.note)"
                disable-transitions>{{scope.row.note}}</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="create_time" label="打卡时间"> 
          <template slot-scope="scope">
              <div>{{scope.row.create_time.replace('T',' ')}}</div>
          </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from "moment";
import { getCheckinList } from "@/api/epidemic";
import { getWeekDays } from "@/utils/index.js";
export default {
  name: "CheckinManger",
  components: {
    FilterForm: () => import("../markSys/plann/components/FilterForm.vue"),
  },
  mounted() {
    this.fetchCheckinList();
  },
  computed: {},
  created() {},
  data() {
    return {
        currentDay:moment().format('YYYY-MM-DD'),
        tableData:[],
        listLoading:false,
    };
  },
  methods: {
    async fetchCheckinList(param,_param) {
        this.listLoading = true
      const nowDay = moment().format('YYYY-MM-DD')
      const weekDays = getWeekDays(nowDay)
      if(param){
          const res = await getCheckinList({
            date_start:param[0],
            date_end:param[1],
            ..._param
          });
          const { data } = res
          this.tableData = this.dealData(data)
          this.listLoading = false
      }else{
          const res = await getCheckinList({
            date_start:weekDays[0],
            date_end: weekDays[weekDays.length - 1]
          });
          const { data } = res
          this.tableData = this.dealData(data)
          this.listLoading = false
      }
    },
    filterTag(value, row) {
        return row.note === value;
    },
    getTagColor(note){
        switch (note) {
            case '在岗':
                return ''
                break;
            case '出差':
                return 'success'
                break;
            case '会议':
                return 'warning'
                break;
            case '城内公务':
                return 'danger'
                break;
            default:
                break;
        }
    },
    dealData(arr){
        if(arr == []) return []
        let newArr = []
        for(let item of arr){
            for(let el of item.info){
                newArr.push(el)
            }
        }
        return newArr 
    },
    async handleSearch(param){
        console.log(param)
        const { dateRange,user = '',userType } = param
        const _param = {}
        const _user = typeof user === "string" ? user.slice(1) : user;
        if (userType === "user") {
            _param.user = _user;
        } else {
            _param.department = _user;
        }
        this.fetchCheckinList([moment(dateRange[0]).format('YYYY-MM-DD'),moment(dateRange[1]).format('YYYY-MM-DD')],_param)

    },
    handleClear(){
        this.currentDay = moment().format('YYYY-MM-DD')
        this.fetchCheckinList()
    },
    //通过属性名获取值。
    formatJson(filterVal, jsonData) {
      return jsonData.map((v,index) =>
        filterVal.map((j) => {
          if(j === 'id'){
              return index + 1
          }  
          if(j === 'create_time'){
              return v[j].replace('T',' ')
          }
          return v[j];
        })
      );
    },
    handleExport(){
        const that = this
        if(this.tableData.length === 0){
            this.$message.warning("暂无数据可以导出");
            return;
        }
        const dataList = this.tableData
        import("@/vendor/Export2Excel").then((excel) => {
        const header = 
            [
                'id',
                '姓名',
                '部门',
                '类型',
                '地址',
                '打卡时间',
                '备注'
            ]
        const filterVal = [
            'id',
            'username',
            'department',
            'note',
            'address',
            'create_time',
            'remarks'
        ]
        const data = that.formatJson(filterVal,dataList)
        excel.export_json_to_excel({
          header,
          data,
          filename: "考勤情况",
          autoWidth: true,
        });
        })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
